<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>方案管理</span>
                <div class="extra">
                    <el-button type="primary" @click="addRepay()">添加方案</el-button>
                </div>
            </div>
        </template>
        <div class="repay-container">
            <div class="repay-container-inner"> <repay-componet :show-edit-delete="true" :key="componentKey">
                </repay-componet>
            </div>
        </div>

        <el-dialog v-model="dialogVisible" title="方案详细信息" width="40%">
            <el-form :model="repaymentModel" label-width="120px" style="padding-right: 30px">
                <el-form-item label="还款规则类型" prop="ruleType">
                    <el-radio-group v-model="repaymentModel.ruleType" :disabled="!enableTOEidt">
                        <el-radio :label="0">一次还清</el-radio>
                        <el-radio :label="1">等额分期</el-radio>
                        <el-radio :label="2">阶段还款</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="还款规则名称" prop="ruleName">
                    <el-input v-model="repaymentModel.ruleName" :disabled="!enableTOEidt"></el-input>
                </el-form-item>
                <template v-if="repaymentModel.ruleType != 2">
                    <el-form-item label="本金占比" prop="principalRatio">
                        <el-input-number :min="0" v-model="repaymentModel.principalRatio" :disabled="!enableTOEidt"
                            controls-position="right">
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="利息占比" prop="interestRatio">
                        <el-input-number :min="0" v-model="repaymentModel.interestRatio" :disabled="!enableTOEidt"
                            controls-position="right">
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="滞纳金占比" prop="lateFeeRatio">
                        <el-input-number :min="0" v-model="repaymentModel.lateFeeRatio" :disabled="!enableTOEidt"
                            controls-position="right">
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="违约金占比" prop="damageRatio">
                        <el-input-number :min="0" v-model="repaymentModel.damageRatio" :disabled="!enableTOEidt"
                            controls-position="right">
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="罚息占比" prop="defaultInterestRatio">
                        <el-input-number :min="0" v-model="repaymentModel.defaultInterestRatio"
                            :disabled="!enableTOEidt" controls-position="right">
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="其他金额占比" prop="otherAmountsRatio">
                        <el-input-number :min="0" v-model="repaymentModel.otherAmountsRatio" :disabled="!enableTOEidt"
                            controls-position="right">
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="还款时间" prop="repaymentTime">
                        <el-input-number :min="0" v-model="repaymentModel.repaymentTime" :disabled="!enableTOEidt"
                            controls-position="right">
                            <template #suffix>
                                <span>天</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="分期次数" prop="numberOfInstallments">
                        <el-input-number :min="0" v-model="repaymentModel.numberOfInstallments"
                            :disabled="!enableTOEidt" controls-position="right">
                            <template #suffix>
                                <span>次</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="手续费" prop="commission">
                        <el-input-number :min="0" v-model="repaymentModel.commission" :disabled="!enableTOEidt"
                            controls-position="right">
                            <template #suffix>
                                <span>元</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                </template>
                <template v-if="repaymentModel.ruleType === 2">
                    <div class="stage-wrapper">
                        <div v-for="(stageRepayment, index) in repaymentModel.stageRepayments" :key="index">
                            <div class="stage-repayment">
                                <div class="stage-repayment-header">
                                    <div>第{{ index + 1 }}期</div>
                                    <div>
                                        <el-button @click="deleteStage(index)" v-if="index !== 0">删除</el-button>
                                        <el-button @click="addStage(index)"
                                            v-if="index === repaymentModel.stageRepayments.length - 1">添加</el-button>
                                    </div>
                                </div>
                                <div class="stage-repayment-footer">
                                    <el-form-item label="本金占比" prop="principalRatio">
                                        <el-input-number :min="0" v-model="stageRepayment.principalRatio"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>%</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="利息占比" prop="interestRatio">
                                        <el-input-number :min="0" v-model="stageRepayment.interestRatio"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>%</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="滞纳金占比" prop="lateFeeRatio">
                                        <el-input-number :min="0" v-model="stageRepayment.lateFeeRatio"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>%</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="违约金占比" prop="damageRatio">
                                        <el-input-number :min="0" v-model="stageRepayment.damageRatio"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>%</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="罚息占比" prop="defaultInterestRatio">
                                        <el-input-number :min="0" v-model="stageRepayment.defaultInterestRatio"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>%</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="其他金额占比" prop="otherAmountsRatio">
                                        <el-input-number :min="0" v-model="stageRepayment.otherAmountsRatio"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>%</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="还款时间" prop="repaymentTime">
                                        <el-input-number :min="0" v-model="stageRepayment.repaymentTime"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>天</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="手续费" prop="commission">
                                        <el-input-number :min="0" v-model="stageRepayment.commission"
                                            :disabled="!enableTOEidt" controls-position="right">
                                            <template #suffix>
                                                <span>元</span>
                                            </template>
                                        </el-input-number>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancle">关闭</el-button>
                    <el-button type="primary" v-if="enableTOEidt" @click="submitRepayment()"> 提交 </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import repayComponet from './repayComponet.vue';
import StageRepayment from '@/types/response/stageRepayment';
import { ref, reactive, watch,onMounted } from 'vue'
import Repayment from '@/types/response/repayment';
import { addRepaymentPlan } from '@/axios/case/repaymentReq';
import useApplicantStore from '@/stores/applicantStore';

const applicantStore = useApplicantStore()
import Notice from '@/utils/notice';
const dialogVisible = ref(false)
const repaymentModel = reactive(new Repayment())////
const enableTOEidt = ref(true) ////
const componentKey = ref(0)

onMounted(() => {
    repaymentModel.applicationInstitutionId = applicantStore.applicantInsId
})
const addRepay = () => {
    dialogVisible.value = true
    repaymentModel.repaymentId = null
    repaymentModel.ruleType = 0
    repaymentModel.ruleName = ''
    repaymentModel.principalRatio = 0
    repaymentModel.interestRatio = 0
    repaymentModel.lateFeeRatio = 0
    repaymentModel.damageRatio = 0
    repaymentModel.defaultInterestRatio = 0
    repaymentModel.otherAmountsRatio = 0
    repaymentModel.repaymentTime = 0
    repaymentModel.numberOfInstallments = 0
    repaymentModel.commission = 0
}
watch(repaymentModel, () => {
    if (repaymentModel.ruleType === 2) {
        if (repaymentModel.stageRepayments === null || repaymentModel.stageRepayments.length === 0) {
            let stage = reactive(new StageRepayment())
            repaymentModel.stageRepayments = [stage]
        }
        if (repaymentModel.repaymentId === null) {
            repaymentModel.repaymentId = Math.floor(1000000 + Math.random() * 9000000)
        }
    }
})
const cancle = () => {
  dialogVisible.value = false
  repaymentModel.ruleType = 0
  repaymentModel.ruleName = ''
  repaymentModel.principalRatio = 0
  repaymentModel.interestRatio = 0
  repaymentModel.lateFeeRatio = 0
  repaymentModel.damageRatio = 0
  repaymentModel.defaultInterestRatio = 0
  repaymentModel.otherAmountsRatio = 0
  repaymentModel.repaymentTime = 0
  repaymentModel.numberOfInstallments = 0
  repaymentModel.commission = 0
}
const deleteStage = (index) => {
    if (index != 0) {
        for (let i = index + 1; i < repaymentModel.stageRepayments.length; i++) {
            repaymentModel.stageRepayments[i].order--
        }
        repaymentModel.stageRepayments.splice(index, 1)
    }
}
const addStage = (index) => {
    let stage = reactive(new StageRepayment())
    stage.repaymentId = repaymentModel.repaymentId
    stage.order = index + 1
    stage.principalRatio = 0
    stage.interestRatio = 0
    stage.lateFeeRatio = 0
    stage.damageRatio = 0
    stage.defaultInterestRatio = 0
    stage.otherAmountsRatio = 0
    stage.repaymentTime = 0
    stage.commission = 0
    repaymentModel.stageRepayments.push(stage)
}
const submitRepayment = async () => {
    try {
        await addRepaymentPlan(repaymentModel)
        dialogVisible.value = false
        Notice.success('新增成功')
        refreshRepayComponent()
    } catch (error) {
        console.error("添加还款方案时出错" + error)
        Notice.error('新增失败')
    }
}
const refreshRepayComponent = () => {
    componentKey.value += 1 // 更新 key 值以刷新子组件
}
</script>

<style>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    width: 98%;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.repay-container {
    width: 100%;
}

.repay-container-inner {
    margin: 0, auto;
}
</style>